<template>
	<view>
		<!--header-->
		
		<!--header-->
		<view v-if="list">

			<block v-for="(item,index) in list">
				<view @tap="detail(item)">
					<view class="tui-header-center" v-if="item.avatar">
						<image :src="item.avatar" class="tui-avatar"></image>
						<view class="tui-info">
							<view class="tui-nickname">{{item.user_nickname}}</view>
							
						</view>
					</view>
					<view class="tui-header-center" v-else>
						<image src="../../static/images/mine_def_touxiang_3x.png" class="tui-avatar"></image>
						<view class="tui-info">
							<view class="tui-nickname">{{item.user_nickname}}</view>
						</view>

					</view>
				</view>
			
			</block>
			
		</view>
		
		<view v-else class="text-center p-2 font-sm text-muted">
			暂时没有下级用户~
		</view>
	</view>
</template>

<script>
	var api = require('@/common/api.js')
	import tuiIcon from "@/components/icon/icon"
	import tuiButton from "@/components/extend/button/button"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiDivider from "@/components/divider/divider"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	export default {
		components: {
			tuiIcon,
			tuiButton,
			tuiListCell,
			tuiDivider,
			tuiLoadmore
		},

		data() {
			return {
				list:[],
				userinfo:''
			}
		},
		onLoad(options) {
			if(this.tui.isLogin()){
				this.userinfo = uni.getStorageSync("user")
			}else{
				uni.showToast({
					title:"您没有登陆，请先登录",
					icon:"none"
				})
				setTimeout(function(){
					uni.navigateTo({
						url:"/pages/mall-extend/my/my"
					})
				},1000)
			}

			api.get({
				url:"user/subordinate",
				data:{
					user_id:this.userinfo.id,
				},
				success:res=>{
					this.list = res.data;
				}
			})
		},
		methods: {
			detail(info){
				uni.navigateTo({
					url: '/pages/subordinate/subordinate?id='+info.id
				})
			},
		}





	}
</script>

<style>

	page{background:#f1f1f1}
	.sj{font-size: 16px;
    background: rgb(253, 152, 87);
    color: #fff;
    padding: 5px;
    border-radius: 20px;
    /* float: right; */
    width: 25%;
    text-align: center;}
	.tui-header-center {
		
		width: 100%;
		height: 128rpx;
		margin-top: 40rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-avatar {
		flex-shrink: 0;
		width: 128rpx;
		height: 128rpx;
		display: block;
		border-radius: 128rpx;
	}

	.tui-info {
		width: 50%;
		padding-left: 30rpx;

	}

	.tui-nickname {
		font-size: 30rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		padding: 12rpx;
	}

	.tui-img-vip {
		width: 56rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.tui-explain {
		width: 80%;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
		opacity: 0.75;
		padding-top: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-btn-edit {
		flex-shrink: 0;
		padding-right: 22rpx;
	}

	.tui-header-btm {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 280rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
	}





</style>
